<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenRouter - 统一AI模型网关</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4, .serif {
            font-family: 'Noto Serif SC', serif;
        }
        .gradient-text {
            background: linear-gradient(135deg, #3B82F6, #8B5CF6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .hero-pattern {
            background-image: radial-gradient(circle at 25% 50%, rgba(59, 130, 246, 0.1), rgba(255, 255, 255, 1) 60%);
        }
        pre {
            background-color: #2D3748;
            color: #E2E8F0;
            border-radius: 0.5rem;
            overflow-x: auto;
        }
        pre code {
            display: block;
            padding: 1.5rem;
        }
        .code-block {
            position: relative;
        }
        .code-copy {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 0.25rem;
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            color: #E2E8F0;
            cursor: pointer;
            transition: all 0.2s;
        }
        .code-copy:hover {
            background: rgba(255, 255, 255, 0.2);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-pattern py-20 md:py-32 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl text-center">
            <h1 class="text-4xl md:text-6xl font-bold mb-6">
                <span class="gradient-text">OpenRouter</span>
            </h1>
            <p class="text-xl md:text-2xl text-gray-700 mb-8 max-w-3xl mx-auto">
                统一AI模型网关 - 通过单一API访问多个顶级AI模型
            </p>
            <div class="bg-white rounded-xl shadow-lg p-8 max-w-4xl mx-auto text-left">
                <p class="text-lg text-gray-700 mb-6">
                    OpenRouter 是一个统一的 API 网关，允许开发者通过单一接口访问多个 AI 模型提供商的服务，包括 OpenAI、Anthropic、Google、Meta 等公司提供的模型。这个平台特别适合希望在自己的应用中使用多种 AI 模型，又不想分别管理多个供应商关系的开发者。
                </p>
                <a href="https://openrouter.ai/" target="_blank" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg font-medium hover:from-blue-600 hover:to-purple-700 transition-all">
                    <span>访问 OpenRouter</span>
                    <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto max-w-5xl px-4 md:px-0 py-16">
        <!-- Advantages Section -->
        <section class="mb-20">
            <h2 class="text-3xl font-bold mb-8 text-center serif">主要优势</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Advantage Card 1 -->
                <div class="bg-white rounded-xl shadow-md p-8 card-hover">
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-100 p-3 rounded-full mr-4">
                            <i class="fas fa-code text-blue-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800">统一 API 访问</h3>
                    </div>
                    <p class="text-gray-600 mb-4">
                        通过 OpenRouter，你可以使用一致的 API 格式访问不同提供商的模型，无需为每个模型提供商编写不同的集成代码。
                    </p>
                    <div class="code-block">
                        <pre><code class="language-javascript">// 使用 OpenRouter API 调用不同模型的示例
const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.OPENROUTER_API_KEY}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    model: 'anthropic/claude-3-opus-20240229', // 可轻松切换为其他模型
    messages: [
      { role: 'user', content: '请简要介绍 OpenRouter.ai' }
    ]
  })
});</code></pre>
                        <button class="code-copy" onclick="copyCode(this)">复制代码</button>
                    </div>
                </div>
                
                <!-- Advantage Card 2 -->
                <div class="bg-white rounded-xl shadow-md p-8 card-hover">
                    <div class="flex items-center mb-4">
                        <div class="bg-purple-100 p-3 rounded-full mr-4">
                            <i class="fas fa-shapes text-purple-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800">模型多样性</h3>
                    </div>
                    <p class="text-gray-600 mb-4">
                        平台提供访问多种顶级模型的能力，包括：
                    </p>
                    <ul class="grid grid-cols-1 md:grid-cols-2 gap-2">
                        <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> OpenAI 系列</li>
                        <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Anthropic Claude</li>
                        <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Google Gemini</li>
                        <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Meta Llama</li>
                        <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Mistral AI</li>
                        <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> 其他开源模型</li>
                    </ul>
                </div>
                
                <!-- Advantage Card 3 -->
                <div class="bg-white rounded-xl shadow-md p-8 card-hover">
                    <div class="flex items-center mb-4">
                        <div class="bg-green-100 p-3 rounded-full mr-4">
                            <i class="fas fa-chart-line text-green-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800">成本管理</h3>
                    </div>
                    <p class="text-gray-600 mb-4">
                        OpenRouter 提供透明的计费模式，允许你按使用量付费，并且可以设置预算限制，防止意外超支。它还提供每个模型的价格比较，帮助开发者根据预算和性能需求选择最合适的模型。
                    </p>
                </div>
                
                <!-- Advantage Card 4 -->
                <div class="bg-white rounded-xl shadow-md p-8 card-hover">
                    <div class="flex items-center mb-4">
                        <div class="bg-red-100 p-3 rounded-full mr-4">
                            <i class="fas fa-shield-alt text-red-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800">故障转移能力</h3>
                    </div>
                    <p class="text-gray-600">
                        如果某个模型提供商暂时不可用，OpenRouter 可以自动将请求转发到备用模型，确保应用的可靠性。
                    </p>
                </div>
            </div>
        </section>

        <!-- Use Cases Section -->
        <section class="mb-20">
            <h2 class="text-3xl font-bold mb-8 text-center serif">实际应用场景</h2>
            
            <div class="grid grid-cols-1 gap-8">
                <!-- Use Case 1 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="md:flex">
                        <div class="md:w-2/3 p-8">
                            <h3 class="text-2xl font-bold mb-4 text-gray-800">开发多模型应用</h3>
                            <p class="text-gray-600 mb-6">
                                对于希望让用户可以选择不同 AI 模型的应用开发者，OpenRouter 提供了极大便利。
                            </p>
                            <div class="code-block">
                                <pre><code class="language-javascript">// 允许用户选择模型的示例
async function generateResponse(prompt, selectedModel) {
  const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.OPENROUTER_API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      model: selectedModel, // 用户选择的模型
      messages: [
        { role: 'user', content: prompt }
      ]
    })
  });
  
  return await response.json();
}</code></pre>
                                <button class="code-copy" onclick="copyCode(this)">复制代码</button>
                            </div>
                        </div>
                        <div class="md:w-1/3 bg-gradient-to-b from-blue-50 to-purple-50 flex items-center justify-center p-8">
                            <i class="fas fa-mobile-alt text-6xl text-blue-500 opacity-50"></i>
                        </div>
                    </div>
                </div>
                
                <!-- Use Case 2 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="md:flex flex-row-reverse">
                        <div class="md:w-2/3 p-8">
                            <h3 class="text-2xl font-bold mb-4 text-gray-800">模型性能比较</h3>
                            <p class="text-gray-600 mb-6">
                                研究人员和开发者可以使用 OpenRouter 来比较不同模型在特定任务上的表现，从而做出更明智的选择。
                            </p>
                            <div class="mermaid">
                                graph TD
                                    A[输入提示词] -->|发送到| B(OpenRouter)
                                    B --> C[GPT-4]
                                    B --> D[Claude 3]
                                    B --> E[Gemini Pro]
                                    C --> F[响应结果1]
                                    D --> G[响应结果2]
                                    E --> H[响应结果3]
                                    F --> I[性能比较]
                                    G --> I
                                    H --> I
                            </div>
                        </div>
                        <div class="md:w-1/3 bg-gradient-to-b from-purple-50 to-blue-50 flex items-center justify-center p-8">
                            <i class="fas fa-chart-bar text-6xl text-purple-500 opacity-50"></i>
                        </div>
                    </div>
                </div>
                
                <!-- Use Case 3 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="md:flex">
                        <div class="md:w-2/3 p-8">
                            <h3 class="text-2xl font-bold mb-4 text-gray-800">降低供应商依赖风险</h3>
                            <p class="text-gray-600">
                                通过使用 OpenRouter，开发者可以降低对单一 AI 供应商的依赖，在供应商调整价格或政策时保持更大的灵活性。
                            </p>
                        </div>
                        <div class="md:w-1/3 bg-gradient-to-b from-green-50 to-blue-50 flex items-center justify-center p-8">
                            <i class="fas fa-handshake text-6xl text-green-500 opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Integration Section -->
        <section class="mb-20">
            <h2 class="text-3xl font-bold mb-8 text-center serif">开发集成</h2>
            
            <div class="bg-white rounded-xl shadow-md p-8 mb-8">
                <h3 class="text-2xl font-bold mb-6 text-gray-800">基本集成步骤</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="flex items-start">
                        <div class="bg-blue-100 text-blue-600 rounded-full w-10 h-10 flex items-center justify-center mr-4 flex-shrink-0">
                            <span class="font-bold">1</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-800 mb-2">注册获取API密钥</h4>
                            <p class="text-gray-600">在 OpenRouter.ai 注册并获取 API 密钥</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="bg-purple-100 text-purple-600 rounded-full w-10 h-10 flex items-center justify-center mr-4 flex-shrink-0">
                            <span class="font-bold">2</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-800 mb-2">查阅API文档</h4>
                            <p class="text-gray-600">了解可用模型和参数配置</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="bg-green-100 text-green-600 rounded-full w-10 h-10 flex items-center justify-center mr-4 flex-shrink-0">
                            <span class="font-bold">3</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-800 mb-2">集成到应用</h4>
                            <p class="text-gray-600">将 OpenRouter API 集成到你的应用中</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-md p-8">
                <h3 class="text-2xl font-bold mb-6 text-gray-800">与 OpenAI API 的兼容性</h3>
                <p class="text-gray-600 mb-6">
                    如果你的应用已经使用 OpenAI API，迁移到 OpenRouter 通常只需要更改 API 端点和身份验证信息：
                </p>
                <div class="code-block">
                    <pre><code class="language-javascript">// 从 OpenAI 迁移到 OpenRouter 的示例
// 原 OpenAI 代码
// const response = await openai.chat.completions.create({
//   model: "gpt-4",
//   messages: [...]
// });

// OpenRouter 替代版本
const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.OPENROUTER_API_KEY}`,
    'HTTP-Referer': 'https://yourwebsite.com', // 记录请求来源
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    model: 'openai/gpt-4',
    messages: [...]
  })
});</code></pre>
                    <button class="code-copy" onclick="copyCode(this)">复制代码</button>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-12">
        <div class="container mx-auto max-w-5xl px-4 md:px-0">
            <div class="text-center">
                <h3 class="text-xl font-bold text-white mb-2">技术小馆</h3>
                <p class="mb-4">探索技术前沿，分享开发经验</p>
                <a href="http://www.yuque.com/jtostring" target="_blank" class="text-blue-400 hover:text-blue-300 transition-colors">
                    <i class="fas fa-external-link-alt mr-1"></i> www.yuque.com/jtostring
                </a>
            </div>
        </div>
    </footer>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true
            }
        });

        // Copy code function
        function copyCode(button) {
            const codeBlock = button.parentNode.querySelector('code');
            const range = document.createRange();
            range.selectNode(codeBlock);
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);
            document.execCommand('copy');
            window.getSelection().removeAllRanges();
            
            // Change button text temporarily
            const originalText = button.textContent;
            button.textContent = '已复制!';
            setTimeout(() => {
                button.textContent = originalText;
            }, 2000);
        }
    </script>
</body>
</html>